<template>
	<div class="index">

		<a-drawer title="Data analysis" placement="right" width="50%" :visible="visible"
			:after-visible-change="afterVisibleChange" @close="onClose">

			<a-card :title="'Analysis chart of recent messages (Last week)'"
				style="height: 350px;margin-bottom: 20px;">
				<div class="chart">
					<canvas id="mountNode" style="width: 100%;height: 100%;"></canvas>
				</div>
			</a-card>

			<a-card :title="'Total messages: '+all" style="height: 400px;">

				<a-statistic title="Consumed messages" :value="consumed" />
				<a-progress :percent="consumed/all*100" strokeColor="#52c41a" :showInfo="false"
					style="margin-bottom: 20px;" />

				<a-statistic title="Unconsumed messages" :value="unconsumed" />
				<a-progress :percent="unconsumed/all*100" :showInfo="false" strokeColor="#fa8c16" />

				<a-statistic title="Delay messages" :value="delay" />
				<a-progress :percent="delay/all*100" strokeColor="#00aaff" :showInfo="false"
					style="margin-bottom: 20px;" />

			</a-card>
		</a-drawer>

		<div style="margin: 15px;">
			<a-button @click="showDrawer" style="width: 100%;" size="large">
				Data analysis
			</a-button>
		</div>
		
		<a-card :title="'Consumers'" style="margin: 15px;"  hoverable="true">
			<a-table size="small" style="margin-top: 15px;" :columns="consumerTitle" :data-source="consumers"
				:pagination="{ pageSize: 10 }" bordered />
		</a-card>
		
		<a-card :title="'Producers'" style="margin: 15px;"  hoverable="true">
			<a-table size="small" style="margin-top: 15px;" :columns="producerTitle" :data-source="producers"
				:pagination="{ pageSize: 10 }" bordered />
		</a-card>
	</div>
</template>

<script src="./Monitor.js">

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.index {}
</style>
